<template>
  <div class="mod-blog__router">
    <el-form-item>
      <el-button v-if="state.hasPermission('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
    </el-form-item>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" show-overflow-tooltip row-key="id" border
      style="width: 100%">
      <el-table-column prop="name" label="名称" header-align="center" min-width="150"></el-table-column>
      <el-table-column prop="icon" label="图标" header-align="center" align="center">
        <template v-slot="scope">
          <svg class="iconfont" aria-hidden="true">
            <use :xlink:href="`#${scope.row.icon}`"></use>
          </svg>
        </template>
      </el-table-column>
      <el-table-column prop="menuType" label="类型" header-align="center" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.menuType === 0">菜单</el-tag>
          <el-tag v-else type="info">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" header-align="center" align="center"></el-table-column>
      <el-table-column prop="path" label="路由" header-align="center" align="center" width="150"></el-table-column>
      <el-table-column prop="permissions" label="授权标识" header-align="center" align="center"
        width="150"></el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="170">
        <template v-slot="scope">
          <el-button v-if="scope.row.menuType === 0" type="primary" link @click="addHandle(scope.row.id)">新增</el-button>
          <el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-button type="primary" link @click="state.deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <ChyDrawer v-model="isShowDrawer" :title="dataForm.title" @confirm="dataFormSubmitHandle()">
      <el-form :model="dataForm" class="data_form" ref="dataFormRef" :rules="rules"
        @keyup.enter="dataFormSubmitHandle()" label-width="auto" style="max-width: 600px">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="dataForm.name" />
        </el-form-item>
        <el-form-item label="路由地址" prop="path">
          <el-input v-model="dataForm.path" />
        </el-form-item>
        <el-form-item label="组件路径" prop="component">
          <el-input v-model="dataForm.component" />
        </el-form-item>
        <el-form-item label="授权标识" prop="permissions">
          <el-input v-model="dataForm.permissions" placeholder="多个用逗号分隔，如：sys:menu:save,sys:menu:update" />
        </el-form-item>
        <el-form-item label="类型" prop="hidden">
          <el-radio-group v-model="dataForm.menuType">
            <el-radio :value="0" size="large">菜单</el-radio>
            <el-radio :value="1" size="large">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="dataForm.menuType === 0" prop="icon" label="图标" class="icon-list">
          <el-popover ref="iconListPopover" :width="458" placement="top-start" trigger="click"
            popper-class="popover-pop mod-sys__menu-icon-popover">
            <template v-slot:reference>
              <el-input v-model="dataForm.icon" :readonly="true" placeholder="图标"></el-input>
            </template>
            <div class="mod-sys__menu-icon-inner">
              <div class="mod-sys__menu-icon-list">
                <el-button v-for="(item, index) in iconList" :key="index" @click="iconListCurrentChangeHandle(item)"
                  :class="{ 'is-active': dataForm.icon === item }">
                  <svg class="icon-svg" aria-hidden="true">
                    <use :xlink:href="`#${item}`"></use>
                  </svg>
                </el-button>
              </div>
            </div>
          </el-popover>
        </el-form-item>
        <el-form-item label="是否隐藏" prop="hidden">
          <el-radio-group v-model="dataForm.hidden">
            <el-radio :value="1" size="large">是</el-radio>
            <el-radio :value="0" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="免登录" prop="noNeedLogin">
          <el-radio-group v-model="dataForm.noNeedLogin">
            <el-radio :value="1" size="large">是</el-radio>
            <el-radio :value="0" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="dataForm.sort" :min="1" :max="999" />
        </el-form-item>
      </el-form>
    </ChyDrawer>
  </div>
</template>

<script setup lang='ts'>
import { ref, toRefs, reactive, defineComponent } from 'vue'
import useView from '@/hooks/useView'
import ChyDrawer from "@/components/chy-drawer"
import { getIconList } from "@/utils/utils"
import baseService from "@/service/baseService"
import { ElMessage } from "element-plus"

const dataFormRef = ref()
const iconList = ref<string[]>([])
iconList.value = getIconList()
const iconListPopover = ref()


const dataForm = reactive({
  title: '新增路由',
  id: '',
  pid: 0,
  name: '',
  path: '',
  component: '',
  permissions: '',
  menuType: 0,
  icon: '',
  hidden: 0,
  noNeedLogin: 0,
  sort: 0
})

const rules = ref({
  name: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
  path: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
  component: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
  sort: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
})

const view = reactive({
  getDataListURL: "/blog/router/list",
  deleteURL: "/blog/router"
})
const state = reactive({ ...useView(view), ...toRefs(view) })
let isShowDrawer = ref(false)

const addHandle = (id?: number) => {
  isShowDrawer.value = true
  dataForm.title = '新增子路由'
  if (dataFormRef.value) {
    dataFormRef.value.resetFields()
  }
  id !== undefined && (dataForm.pid = id)
}

const addOrUpdateHandle = (id?: number) => {
  isShowDrawer.value = true
  dataForm.title = id ? '修改路由' : '新增路由'
  // 重置表单数据
  dataForm.id = ""
  if (dataFormRef.value) {
    dataFormRef.value.resetFields()
  }
  if (id) {
    // 获取详情
    baseService.get("/blog/router", { id: id }).then(res => {
      dataForm.id = res.data.id
      dataForm.pid = res.data.pid
      dataForm.name = res.data.name
      dataForm.path = res.data.path
      dataForm.component = res.data.component
      dataForm.permissions = res.data.permissions
      dataForm.menuType = res.data.menuType
      dataForm.icon = res.data.icon
      dataForm.hidden = res.data.hidden
      dataForm.noNeedLogin = res.data.noNeedLogin
      dataForm.sort = res.data.sort
    })
  }
}

const dataFormSubmitHandle = () => {
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false
    }
    (!dataForm.id ? baseService.post : baseService.put)("/blog/router", dataForm).then((res) => {
      if(res.code === 0) {
        ElMessage.success({
          message: "成功",
          duration: 500,
          onClose: () => {
            isShowDrawer.value = false
            state.getDataList()
          }
        })
      }
    })

  })
}

// 图标, 选中
const iconListCurrentChangeHandle = (icon: string) => {
  dataForm.icon = icon
  iconListPopover.value.hide()
};


</script>

<style lang='scss' scoped>
.data_form {}
</style>